import { Component, ChangeDetectorRef, ViewChild, ElementRef } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'ng-project'
  isColl = false
  openHandler(val: any): void {
    sessionStorage.setItem("route", val.to)
    this.recursive(this.menus, sessionStorage.getItem('route'), sessionStorage.getItem('titleName'))
  };
  collapsedHandler(e: any) {
    sessionStorage.setItem("titleName", e.title)
  }
 menus:any[] = []
  isCollapsed = false;
  isLogin=true

  toggleCollapsed(): void {
    this.isCollapsed = !this.isCollapsed;
  };
  recursive(arr: any[], val?: string | null, open?: string | null): void {
    // 第一次进入页面回去检查是否有路由地址
    if(!sessionStorage.getItem('route')) {
      this.menus[0].selected = true
    }
    arr?.forEach((element: { to: string; selected: boolean; children: [{ to: string; selected: boolean; open: boolean, title: string}]; open: boolean, title: string}) => {
      if(open === element.title) {
        element.open = true
      }
      if(element.to === sessionStorage.getItem('route')) {
        element.selected = true
      } else {
        element.selected = false
      }
      return this.recursive(element.children, val, open)
    })
  }
  constructor(private route: Router) {
    // console.log('00构造函数执行了---除了使用简单的值对局部变量进行初始化之外，什么都不应该做')
  }
  outLogin() {
    this.route.navigate(['/login']);
    this.isLogin=false
  }
  // ngOnChanges() {
  //   console.log('01ngOnChanges执行了---当被绑定的输入属性的值发生变化时调用(父子组件传值的时候会触发)', ChangeDetectorRef); 
  //   this.recursive(this.menus, sessionStorage.getItem('route'), sessionStorage.getItem('titleName'))
    

  // }
  ngOnInit() {
    // console.log('02ngOnInit执行了--- 请求数据一般放在这个里面',this.menus);
    // 根据路由生成菜单
    let routeMenus: { level: number; title: string; icon: string; selected: boolean; disabled: boolean; to: string, open?: boolean, children?: any[] }[] = []
    this.route.config.forEach((item) => {
      let menuObj: {level: number, title: string, icon: string, selected: boolean, disabled: boolean, to: string, open: boolean, children: []} = {
        level: 1,
        title: '',
        icon: 'home',
        selected: false,
        disabled: false,
        to: '',
        open: false,
        children: []
      }
      if(!item.redirectTo&&!item.path?.includes('/')&&item.path!=='login') {
        menuObj.level = 1
        menuObj.title = item.data?.['breadcrumb']
        menuObj.icon = item.data?.['icon']
        menuObj.to = item.path?item.path: ''
        routeMenus.push(menuObj)
      } else if (item.path?.includes('/')){
        routeMenus.map((ele) => {
          if(item.path?.includes(ele.to)) {
            let childObj = {
              level: 2,
              title: item.data?.['breadcrumb'],
              icon: item.data?.['icon'],
              selected: false,
              disabled: false,
              to: item.path,
            }
            ele.children?.push(childObj)
          }
        })
        menuObj.title = item.data?.['breadcrumb']
        menuObj.icon = item.data?.['icon']
        menuObj.to = item.path?item.path: ''
      }
    })
    this.menus = routeMenus.map((item) =>{
      if(item.children?.length === 0) {
        delete item.children
        delete item.open
      }
      return item
    })
    this.recursive(this.menus, sessionStorage.getItem('route'), sessionStorage.getItem('titleName'))
    
  }
  // ngDoCheck() {
  //   console.log('03ngDoCheck执行了---检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应');
    
  // }
  ngAfterContentInit() {
    // console.log('04ngAfterContentInit执行了---当把内容投影进组件之后调用',this.menus);

  }
  // ngAfterContentChecked() {
  //   console.log('05ngAfterContentChecked执行了---每次完成被投影组件内容的变更检测之后调用');
  // }
  ngAfterViewInit() : void {
    // console.log('06 ngAfterViewInit执行了----初始化完组件视图及其子视图之后调用（dom操作放在这个里面）', );
  }
  // ngAfterViewChecked() {
  //   console.log('07ngAfterViewChecked执行了----每次做完组件视图和子视图的变更检测之后调用');
  // }
  // ngOnDestroy() {
  //   console.log('08ngOnDestroy执行了····');
  // }
}
